<template>
	<view>
		<up-swiper indicator circular radius="0" indicatorMode="dot" :list="list1" height="680rpx"></up-swiper>
		<view class=""
			style="display: flex;align-items: center;background: linear-gradient(to right,#017A6B,#56BDAA);padding:20rpx 30rpx;margin-top: -20rpx;color: white;justify-content: space-between;z-index: 999999;position: relative;margin-bottom: 20rpx;border-radius: 2rpx solid #D8FCE6;border-radius: 30rpx 30rpx 0 0;">
			<view class="" style="font-weight: 600;font-size: 36rpx;color: #B3DDDB;font-style: oblique;">
				服务保障
			</view>
			<image src="https://dg.fuliaoxx.com/imgs/dun.png" mode=""
				style="width: 44rpx;height: 44rpx;margin-left: 12rpx;">
			</image>
			<view class="" style="font-size: 26rpx;color: #E1F9F6;flex: 1;text-align: right;">
				高效专业 | 价格透明 | 售后保障
			</view>
		</view>
		<view class="w-1 br-20 fl-s-s bg-ff relative p-30" style="margin-top: -30rpx; border-radius: 40rpx 40rpx 0 0;">
			<view class="w-1 fr-b-c">
				<view class="c-price">
					<text class="fs-28 bold">￥</text>
					<text class="fs-36 bold">{{info.price || 1}}</text>
					<text class="fs-24 bold">起</text>
				</view>
			</view>
			<text class="c-00 fs-32 bold text-line-2 m-t-10">{{info.title}}</text>
			<text class="text-line-2 fs-24 c-77 m-t-10" style="color: #0D8474;">{{info.description}}</text>
		</view>

		<!-- 		<view class="fl-s-s w-1 bg-ff m-t-20" style="padding: 30rpx 20rpx;">
			<view class="fr-s-c">
				<view class="line-col-bar"></view>
				<text class="c-33 fs-34 bold m-l-10">服务内容</text>
			</view>
			<view class="w-1 m-t-20">
				<up-parse class="fs-28" :content="info.content"></up-parse>
			</view>
		</view> -->
		<view class="" style="background-color: white;padding: 20rpx;margin-top: 20rpx;">
			<view class="fl-s-s w-1  m-t-20" style="padding: 30rpx 20rpx;background-color: #E9FCFA;">
				<view class="fr-s-c">
					<view class="line-col-bar"></view>
					<text class="c-33 fs-34 bold m-l-10">报价模式服务标准</text>
				</view>

				<view class="box m-t-20" style="display: flex;flex-wrap: wrap;width: calc(100% - 20rpx);">
					<view class="" style="display: flex;width: 50%;margin-bottom: 10rpx;">
						<view class="" style="display: flex;">
							<view class="" style="display: flex;flex-direction: column;align-items: center;">
								<view class="num"
									style="background-color: #62E0D1;border-radius: 100px;color: white;font-weight: 600;width: 60rpx;height: 60rpx;display: flex;justify-content: center;align-items: center;">
									01
								</view>
								<image src="https://dg.fuliaoxx.com/imgs/sjx.png" mode=""
									style="height: 53.65rpx;width: 13rpx;margin-top: 10rpx;">
								</image>
							</view>
							<view class="" style="margin: 10rpx;font-size: 28rpx;">
								免费在线下单
							</view>
						</view>
					</view>
					<view class="" style="display: flex;width: 50%;margin-bottom: 10rpx;">
						<view class="" style="display: flex;">
							<view class="" style="display: flex;flex-direction: column;align-items: center;">
								<view class="num"
									style="background-color: #62E0D1;border-radius: 100px;color: white;font-weight: 600;width: 60rpx;height: 60rpx;display: flex;justify-content: center;align-items: center;">
									05
								</view>
								<image src="https://dg.fuliaoxx.com/imgs/sjx.png" mode=""
									style="height: 53.65rpx;width: 13rpx;margin-top: 10rpx;">
								</image>
							</view>
							<view class="" style="margin: 10rpx;font-size: 28rpx;">
								师傅上门服务
							</view>
						</view>
					</view>
					<view class="" style="display: flex;width: 50%;margin-bottom: 10rpx;">
						<view class="" style="display: flex;">
							<view class="" style="display: flex;flex-direction: column;align-items: center;">
								<view class="num"
									style="background-color: #62E0D1;border-radius: 100px;color: white;font-weight: 600;width: 60rpx;height: 60rpx;display: flex;justify-content: center;align-items: center;">
									02
								</view>
								<image src="https://dg.fuliaoxx.com/imgs/sjx.png" mode=""
									style="height: 53.65rpx;width: 13rpx;margin-top: 10rpx;">
								</image>
							</view>
							<view class="" style="margin: 10rpx;font-size: 28rpx;">
								确认并支付钱款
							</view>
						</view>
					</view>
					<view class="" style="display: flex;width: 50%;margin-bottom: 10rpx;">
						<view class="" style="display: flex;">
							<view class="" style="display: flex;flex-direction: column;align-items: center;">
								<view class="num"
									style="background-color: #62E0D1;border-radius: 100px;color: white;font-weight: 600;width: 60rpx;height: 60rpx;display: flex;justify-content: center;align-items: center;">
									06
								</view>
								<image src="https://dg.fuliaoxx.com/imgs/sjx.png" mode=""
									style="height: 53.65rpx;width: 13rpx;margin-top: 10rpx;">
								</image>
							</view>
							<view class="" style="margin: 10rpx;font-size: 28rpx;">
								服务成功验收
							</view>
						</view>
					</view>
					<view class="" style="display: flex;width: 50%;margin-bottom: 10rpx;">
						<view class="" style="display: flex;">
							<view class="" style="display: flex;flex-direction: column;align-items: center;">
								<view class="num"
									style="background-color: #62E0D1;border-radius: 100px;color: white;font-weight: 600;width: 60rpx;height: 60rpx;display: flex;justify-content: center;align-items: center;">
									03
								</view>
								<image src="https://dg.fuliaoxx.com/imgs/sjx.png" mode=""
									style="height: 53.65rpx;width: 13rpx;margin-top: 10rpx;">
								</image>
							</view>
							<view class="" style="margin: 10rpx;font-size: 28rpx;">
								师傅报价
							</view>
						</view>
					</view>
					<view class="" style="display: flex;width: 50%;margin-bottom: 10rpx;">
						<view class="" style="display: flex;">
							<view class="" style="display: flex;flex-direction: column;align-items: center;">
								<view class="num"
									style="background-color: #62E0D1;border-radius: 100px;color: white;font-weight: 600;width: 60rpx;height: 60rpx;display: flex;justify-content: center;align-items: center;">
									07
								</view>
								<image src="https://dg.fuliaoxx.com/imgs/sjx.png" mode=""
									style="height: 53.65rpx;width: 13rpx;margin-top: 10rpx;">
								</image>
							</view>
							<view class="" style="margin: 10rpx;font-size: 28rpx;">
								线上交易售后保障
							</view>
						</view>
					</view>
					<view class="" style="display: flex;width: 50%;margin-bottom: 10rpx;">
						<view class="" style="display: flex;">
							<view class="" style="display: flex;flex-direction: column;align-items: center;">
								<view class="num"
									style="background-color: #62E0D1;border-radius: 100px;color: white;font-weight: 600;width: 60rpx;height: 60rpx;display: flex;justify-content: center;align-items: center;">
									04
								</view>
							</view>
							<view class="" style="margin: 10rpx;font-size: 28rpx;">
								师傅致电预约时间
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="" style="background-color: white;padding: 20rpx;margin-top: 20rpx;">
			<view class="" style="background-color: #E9FCFA;padding: 30rpx;">
				<view class="" style="display: flex;align-items: center;margin-bottom:40rpx">
					<image src="https://dg.fuliaoxx.com/imgs/t1.png" mode=""
						style="width: 102rpx;height: 102rpx;margin-right: 30rpx;"></image>
					<view class="" style="font-size: 27rpx;">
						<view class="">
							电工到位 产线不停
						</view>
						<view class="">
							持证操作 专业高效
						</view>
					</view>
				</view>
				<view class="" style="display: flex;align-items: center;margin-bottom:40rpx">
					<image src="https://dg.fuliaoxx.com/imgs/t2.png" mode=""
						style="width: 102rpx;height: 102rpx;margin-right: 30rpx;"></image>
					<view class="" style="font-size: 27rpx;">
						<view class="">
							电路有故障？30分钟抢修
						</view>
						<view class="">
							比养电工省60% 随用随聘
						</view>
					</view>
				</view>
				<view class="" style="display: flex;align-items: center;margin-bottom:40rpx">
					<image src="https://dg.fuliaoxx.com/imgs/t3.png" mode=""
						style="width: 102rpx;height: 102rpx;margin-right: 30rpx;"></image>
					<view class="" style="font-size: 27rpx;">
						<view class="">
							定期巡检预警 停产损失归零
						</view>
						<view class="">
							用电隐患早发现 维修费省50%
						</view>
					</view>
				</view>
				<view class="" style="display: flex;align-items: center;margin-bottom:40rpx">
					<image src="https://dg.fuliaoxx.com/imgs/t4.png" mode=""
						style="width: 102rpx;height: 102rpx;margin-right: 30rpx;"></image>
					<view class="" style="font-size: 27rpx;">
						<view class="">
							专业认证电工 持证上岗
						</view>
						<view class="">
							10年经验电工 专修工业设备
						</view>
					</view>
				</view>
				<view class="" style="display: flex;align-items: center;margin-bottom:40rpx">
					<image src="https://dg.fuliaoxx.com/imgs/t5.png" mode=""
						style="width: 102rpx;height: 102rpx;margin-right: 30rpx;"></image>
					<view class="" style="font-size: 27rpx;">
						<view class="">
							保障生产用电
						</view>
						<view class="">
							早8点-晚10点极速派单
						</view>
					</view>
				</view>
				<view class="" style="display: flex;align-items: center;">
					<image src="https://dg.fuliaoxx.com/imgs/t6.png" mode=""
						style="width: 102rpx;height: 102rpx;margin-right: 30rpx;"></image>
					<view class="" style="font-size: 27rpx;">
						<view class="">
							企业级电工调度中心
						</view>
						<view class="">
							修10kV配电系统 保障连续供电
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="background-color: white;padding: 20rpx;margin-top: 20rpx;">
			<view class="" style="background-color: #E9FCFA;padding: 30rpx;">
				<view class="fr-s-c">
					<view class="line-col-bar"></view>
					<text class="c-33 fs-34 bold m-l-10">注意事项</text>
				</view>
				<view class="" style="font-size: 26rpx;margin-bottom: 20rpx;margin-top: 20rpx;display: flex;">
					<view class=""
						style="width: 40rpx;height: 40rpx;background-color: #45DAC8;color: white;display: flex;justify-content: center;align-items: center;border-radius: 100px;min-width: 40rpx;margin-right: 10rpx;">
						1
					</view> 线下交易有风险,由此产生的质量或资金纠纷问题，本平台不作任何担保处理。
				</view>
				<view class="" style="font-size: 26rpx;margin-top: 20rpx;display: flex;">
					<view class=""
						style="width: 40rpx;height: 40rpx;background-color: #45DAC8;color: white;display: flex;justify-content: center;align-items: center;border-radius: 100px;min-width: 40rpx;margin-right: 10rpx;">
						2
					</view> 师傅上门后,只针对订单中相对应的数量提供服务，如现场需安装的需求超出订单数量,或有其他服务需求,您可与师傅协商沟通,并
				</view>
			</view>

		</view>
		<view class="" style="background-color: white;padding: 20rpx 0;margin-top: 20rpx;">
			<view class="fl-s-s   m-t-20"
				style="margin: 30rpx 20rpx;background: #E9FCFA;padding: 20rpx;width: calc(100% - 40rpx);">
				<view class="fr-s-c">
					<view class="line-col-bar"></view>
					<text class="c-33 fs-34 bold m-l-10">收费标准</text>
				</view>
				<view class=" fl-s-s br-20 m-t-20" style="width: calc(100% - 20rpx);">
					<view class="baritem w-1 fr-b-c" @click="showxm = !showxm" style="padding: 0 25rpx;">
						<text class="flex-1 fs-28 bold m-r-20">项目名称</text>
						<up-icon :name="showxm?'arrow-up':'arrow-down'"></up-icon>
					</view>
					<view class="fl-s-s w-1 m-t-20" v-if="showxm" style="padding: 0rpx 25rpx;">
						<view class="w-1 fl-s-s m-b-20" v-for="(val,key) in info.projectjson" :key="key">
							<view class="w-1 fr-b-c">
								<text class="c-33 fs-28 bold">{{key}}</text>
								<text class="c-33 fs-28 bold">{{val}}</text>
							</view>
							<!-- <text class="c-33 fs-24 m-t-15">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</text> -->
						</view>
					</view>
				</view>

				<view class=" fl-s-s br-20 m-t-20" style="width: calc(100% - 20rpx);">
					<view class="baritem w-1 fr-b-c" @click="showfee=!showfee" style="padding: 0 25rpx;">
						<text class="flex-1 fs-28 bold m-r-20">材料费用</text>
						<up-icon :name="showfee?'arrow-up':'arrow-down'"></up-icon>
					</view>
					<view class="fl-s-s w-1 m-t-20" v-if="showfee" style="padding: 0rpx 25rpx;">
						<view class="w-1 fl-s-s m-b-25" v-for="(val,key) in info.materialjson" :key="key">
							<view class="w-1 fr-b-c">
								<text class="c-33 fs-28 bold">{{key}}</text>
								<text class="c-33 fs-28 bold">{{val}}</text>
							</view>
							<!-- <text class="c-33 fs-24 m-t-15">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</text> -->
						</view>
					</view>
				</view>
				<!-- <text class="c-33 m-t-30 fs-28 bold">收费说明：</text> -->

			</view>
		</view>
		<view class="w-1  c-33"
			style="background-color:rgba(253,42,0, 0.1);color: #FB6547;padding: 20rpx;display: flex;align-items: center;">
			<image src="https://dg.fuliaoxx.com/imgs/pay.png" mode=""
				style="width: 34rpx;height: 34rpx;margin-right: 20rpx;">
			</image>
			<up-parse class="fs-24" :content="contents"></up-parse>
		</view>


		<view style="height: 260rpx;"></view>

		<view class="iphonex w-1 bg-ff">
			<checkbox-group @change="change" style="margin: 10rpx 20rpx;">
				<checkbox value="1" />
				<text style="font-size: 26rpx;">阅读并同意<text style="color: #01796D;" @click="toXy">《电力服务协议》</text>、<text
						style="color: #01796D;" @click="toXy1">《收费标准》</text></text>
			</checkbox-group>
			<view class="w-1 fr-b-c" style="padding: 25rpx 30rpx;">
				<view class="fl-c relative">
					<!-- <up-icon size="50rpx" color="#999999" name="kefu-ermai"></up-icon> -->
					<image src="../../static/images/tab4/mm1.png" mode="" style="width: 60rpx;height: 60rpx;"></image>
					<text class="c-99 fs-20">客服</text>
					<!-- #ifdef MP-WEIXIN -->
					<button class="w-1 h-1 absolute-0" open-type="contact" style="opacity: 0;"></button>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view @click="contact" class="w-1 h-1 absolute-0"></view>
					<!-- #endif -->
				</view>
				<view class="fr-c suborder" @click="showSku(2)" style="background-color: #FF7F0F;">立即下单</view>
			</view>
		</view>



		<skupop ref="sku" @changetarr="getskutarr" :skuarr="skulei" :info="info" @sub="tosub"></skupop>
	</view>
</template>

<script setup>
	onShareAppMessage(() => {
		return {
			title: info.value.title,
			path: '/pages/index/Detail?id=' + id.value
		}
	})
	const showxm = ref(true);
	const showfee = ref(true)

	function previewImage(current, urls) {
		uni.previewImage({
			current,
			urls: urls.map(item => item = uni.$dimg(item))
		})
	}
	import skupop from '@/components/skupop.vue'
	const sku = ref(null);
	const skutarr = ref([])

	function getskutarr(val) {
		skutarr.value = val;
	}
	const li = ref([])

	function change(e) {
		li.value = e.detail.value;
	}

	function toDetail(item) {
		uni.navigateTo({
			url: `/pages/index/GoodsDetail${item.type==1?2:1}?id=${item.id}`
		})
	}
	// 收费说明
	const contents = ref('')

	function toXy() {
		uni.navigateTo({
			url: "/pages/xieyi/xieyi"
		})
	}

	function toXy1() {
		uni.navigateTo({
			url: "/pages/xieyi/xieyi1"
		})
	}

	function getknew() {
		uni.$post({
			url: '/api/center/About',
			data: {
				type: 7
			},
			loading: false
		}).then(res => {
			contents.value = res.data;
		})
	}


	function contact() {
		console.log('企业微信')
	}




	const id = ref(0)
	onLoad(o => {
		id.value = o.id || 0;
		getinfo()
		getknew()
	})
	// 基本信息
	const info = ref('')
	// sku
	const skulei = ref([])
	async function getinfo() {
		await uni.$post({
			url: '/api/goods/swgoodslis',
			data: {
				aid: id.value
			}
		}).then(res => {
			if (res.data.info.attachfile?.length) {
				list1.value = res.data.info.attachfile.map(i => i = uni.$dimg(i))
			}
			info.value = res.data.info;
			if (res.data.skulei?.length) {
				res.data.skulei.map(i => i.index = -1);
				skulei.value = res.data.skulei;
			}
		})
	}


	const value = ref(1)
	const showg = ref(false)
	const list1 = ref([]);

	function showSku(n) {
		if (li.value.length == 0) {
			uni.showToast({
				icon: "none",
				title: "请先阅读并同意《电力服务协议》和《收费协议》"
			})
			return
		}
		sku.value.typeg = n;
		sku.value.showg = true;
	}



	function tosub() {
		uni.navigateTo({
			url: '/pages/index/SubOrder2'
		})
	}
</script>

<style>
	page {
		background: #f1f5f6;
	}

	.border-main {
		border: 2rpx solid #FF6201;

	}

	.ks {
		writing-mode: vertical-rl;
		/* 文字从上到下竖排，从右到左 */

	}

	.label {
		min-width: 96rpx;
		height: 36rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 2rpx solid #E24700;
		font-size: 22rpx;
		color: #E24700;
	}

	.cbtn {
		width: 136rpx;
		height: 56rpx;
		background: #E24700;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		color: #ffffff;
	}

	.zybox {
		width: 68rpx;
		height: 38rpx;
		background: #ff6201;
		border-radius: 20rpx 0 20rpx 0;
	}

	.addcard {
		width: 332rpx;
		height: 80rpx;
		background: #FFC527;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		color: #ffffff;
		font-size: 28rpx;
	}

	.suborder {
		width: 592rpx;
		height: 96rpx;
		background: #01796D;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		color: #ffffff;
		font-size: 28rpx;
	}

	.ltnum {
		width: 72rpx;
		padding: 0 10rpx;
		height: 38rpx;
		background: #FF6201;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 38rpx;
		text-align: center;
	}

	.a-star {
		width: 41rpx;
		height: 39rpx;
		margin-right: 15rpx;
	}

	.a-star:last-of-type {
		margin-right: 0rpx;
	}

	.lit-star {
		width: 35rpx;
		height: 33rpx;
		margin-right: 10rpx;
	}

	.lit-star:last-of-type {
		margin-right: 8rpx;
	}

	.out-line {
		width: 346rpx;
		height: 18rpx;
		background: #E9E9E9;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		overflow: hidden;
	}

	.out-in {
		width: 270rpx;
		height: 18rpx;
		background: #FFC527;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
	}


	.c-label {
		/* width: 120rpx; */
		min-width: 120rpx;
		padding: 0 15rpx;
		height: 56rpx;
		background: #f3f3f3;
		border-radius: 28rpx;
		font-size: 24rpx;
		line-height: 56rpx;
		color: #333333;
		text-align: center;
		margin-right: 15rpx;
	}

	.c-label-act {
		min-width: 120rpx;
		height: 56rpx;
		background: #00923F;
		border-radius: 28rpx;
		font-size: 24rpx;
		line-height: 56rpx;
		color: #FFFFFF;
		text-align: center;
		margin-right: 20rpx;
	}




	.line-col-bar {
		width: 8rpx;
		height: 32rpx;
		background: #0D8474;
		border-radius: 0rpx 10rpx 10rpx 0rpx;
	}

	.baritem {
		/* width: 686rpx; */
		height: 92rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid #E2E2E2;
	}
</style>